import Vue from 'vue';

/**
 * 拖拽模块 (此指令使用在中间的分割线上， 需配合特定的纵向div来实现拖动)
 *
 * v-move-lengthways
 */
Vue.directive('move-lengthways', {
    bind(el, binding) {
        el.onmousedown = function (e) {
            const init = e.clientY;
            const parent =
                binding.value && binding.value.activePane
                    ? document.getElementById('silder-top' + binding.value.activePane)
                    : document.getElementById('silder-top');

            const initHeight = parent.offsetHeight;
            const maxHeight = 550; // 最大宽度
            const minHeight = 300; // 最小宽度
            document.onmousemove = function (e) {
                const end = e.clientY;
                // 方案1
                // if (350 < end && end < 1000) {
                //   var newHeight = end - init + initHeight;
                //   parent.style.height = newHeight + "px";
                // }
                // 方案2
                let newHeight = end - init + initHeight;
                newHeight = newHeight < minHeight ? minHeight : newHeight;
                newHeight = newHeight > maxHeight ? maxHeight : newHeight;
                parent.style.height = newHeight + 'px';
            };

            document.onmouseup = function () {
                document.onmousemove = document.onmouseup = null;
            };
            // 解决有些时候,在鼠标松开的时候,元素仍然可以拖动;
            document.ondragstart = function (ev) {
                ev.preventDefault();
            };
            document.ondragend = function (ev) {
                ev.preventDefault();
            };
        };
    },
});
